<template>
  <div>
    <!-- 导航按钮-->
    <div class="navs">
      <router-link tag="div" to="/home/recommend" class="item active">
        <div class="img">
          <div class="one iconfont icon-home"></div>
        </div>
        <span>首页</span>
      </router-link>
      <!-- <router-link tag="div" to="/film" class="item">
        <div class="img">
          <div class="one iconfont icon-shipinbofangyingpian"></div>
        </div>
        <span>课堂</span>
      </router-link>
      <router-link tag="div" to="/Small-video" class="item">
        <div class="img">
          <div class="one iconfont icon-gouwudai"></div>
        </div>
        <span>商城</span>
      </router-link> -->
      <router-link tag="div" to="/show" class="item">
        <div class="img">
          <div class="one iconfont icon-shoucang1"></div>
        </div>
        <span>收藏夹</span>
      </router-link>
      <router-link tag="div" to="/my" class="item">
        <div class="img">
          <div class="one iconfont icon-wode1"></div>
        </div>
        <span>我的</span>
      </router-link>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {},
};
</script>

<style lang="less">
.navs {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 40px;
  display: flex;
  background-color: #fff;
  color: #929292;
  z-index: 1;
  padding: 8px 0;
  .item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    text-align: center;
    font-size: 14px;
    span {
      padding-top: 2px;
      color: #0d0d0d;
      display: inline-block;
      font-size: 10px;
    }

    .img {
      text-align: center;
      height: 26px;
      .iconfont {
        font-size: 25px;
        color: #838383;
      }
   
    }
    
    &.router-link-active .one {
      color: #030303;
      font-weight: bold;
    }
   
  }
}
</style>